<template>
  <div class="app-detail">
    <list-layout>
      <div slot="search" v-show="false">
        <el-form :model="queryParams" :inline="true" ref="queryForm" label-width="128px">
          <el-form-item :label="$t('task.filename')" prop="fileName">
            <el-input v-model="queryParams.fileName" :placeholder="
              $t('public.placeholder', {
                placeholder: $t('task.filename'),
              })
            " clearable size="small" @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center;margin-top: 10px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{
              $t("public.search")
            }}
          </el-button>
          <el-button icon="el-icon-refresh" class="resectBtn" size="mini" @click="resetQuery">{{
              $t("public.reset")
            }}
          </el-button>
        </div>
      </div>

      <div class="app-container">
        <div style="display: flex; justify-content: left;">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">{{
              $t("public.add")
            }}
          </el-button>
        </div>
        <div class="container-table" style="margin-top: 10px;">
          <el-table class="table-fixed" ref="multipleTable" v-loading="loading"
                    border
                    :data="incomingList">
            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center"/>
            <el-table-column :label="$t('notificationManager.notificationScenario')" sortable align="left" prop="noticeScene"
                             min-width="120" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('notificationManager.notificationMethod')" sortable align="left" prop="noticeWay" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('inventoryManagement.factory')" sortable align="left" prop="factoryName" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('notificationManager.personnelList')" sortable align="left" prop="noticeUserName" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('notificationManager.messageTemplateContent')" sortable align="left" prop="templateContent" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('notificationManager.oaCallbackAddress')" sortable align="left" prop="oaPath" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="160">
              <template slot-scope="scope">
                <div class="action-wrap">
                  <el-button type="primary" plain icon="el-icon-edit" @click.native="handleEdit(scope)"/>
                  <el-button type="danger" plain icon="el-icon-delete" @click.native="handleDelete(scope)"/>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize" @pagination="getList"
                      layout="total, sizes, prev, pager, next, jumper"/>
        </div>
        <el-dialog
            :title="!isView?$t('public.add'):$t('public.edit')"
            :visible.sync="editItemDialogVisible"
            width="60%"
            @close="editItemDialogVisible = false"
            v-loading="loading"
        >
          <el-form ref="editItemForm" :model="editItem" label-position="left" label-suffix=":" label-width="90px" :rules="auditRules">
            <el-form-item :label="$t('notificationManager.notificationScenario')" prop="noticeScene">
              <el-radio-group v-model="editItem.noticeScene">
                <el-radio label="1">{{ $t('IQC检验不合格') }}</el-radio>
                <el-radio label="2">{{ $t('IQC-MRB审批') }}</el-radio>
                <el-radio label="3">{{ $t('IQC-检验标准维护') }}</el-radio>
                <el-radio label="4">{{ $t('检验标准未维护') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('notificationManager.notificationMethod')" prop="noticeWayList">
              <el-checkbox-group v-model="editItem.noticeWayList">
                <el-checkbox label="1">{{$t('晶彩') }}</el-checkbox>
                <el-checkbox label="2">{{$t('邮件') }}</el-checkbox>
                <el-checkbox label="3">{{$t('OA待办') }}</el-checkbox>
<!--              <el-checkbox v-model="!isView?editItem.noticeWayList[1]=='2':editItem.noticeWayList[1]"-->
<!--                           @change="handleChecked($event, '2')">{{-->
<!--                  $t('邮件')-->
<!--                }}-->
<!--              </el-checkbox>-->
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$t('对应厂区')" prop="factoryName">
              <FactoryDialog v-model="editItem.factoryName"
                             @callback="({plantCode})=>editItem.factoryCode = plantCode"/>
            </el-form-item>
            <el-form-item :label="$t('通知人员')" prop="noticeUserName">
              <select-user-dialog v-model="editItem.noticeUserName" :multiple="true"
                                  @sendData="(row) => handleRespName(row)"/>
            </el-form-item>
            <el-form-item label="模板内容" prop="templateContent">
              <el-input type="textarea" :placeholder="
                        $t('public.placeholder', {
                        placeholder: $t('模板内容'),
                        })
                    " v-model="editItem.templateContent" maxlength="1000" :autosize="{ minRows: 4, maxRows: 4 }">
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('notificationManager.oaCallbackAddress')" prop="oaPath">
              <el-input v-model="editItem.oaPath"
                        :placeholder="$t('public.placeholder',{placeholder: $t('notificationManager.oaCallbackAddress')})"
                        size="small"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="editItemDialogVisible = false">{{ $t('public.cancel')}}</el-button>
            <el-button type="primary" @click="sava">{{ $t('public.save')}}</el-button>
          </div>
        </el-dialog>
      </div>
    </list-layout>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'
import SelectUserDialog from '@/views/components/SelectUserDialog'
import FactoryDialog from '@/views/components/FactoryDialog'
import {
  getList,
  noticeAdd,
  delNoticeById,
  noticeUpdate,
  getNoticeById
} from "@/api/notificationManager/notificationManager"

export default {
  name: 'editMaterial',
  dicts: [
    'NYIQC_CYCLE_TYPE',
    'NYIQC_RULE_TACTICS'
  ],
  components: {
    FactoryDialog,
    SelectUserDialog,
  },
  data() {

    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      isView: false,
      // 遮罩层
      loading: false,
      editItemDialogVisible: false,

      // 表单参数
      form: {},
      incomingList: [],
      // 总条数
      total: 0,
      editItem: {
        noticeWayList:[]
      },
      // 表单校验
      auditRules: {
        noticeScene: [
          {
            required: true,
            message: '通知场景不能为空',
            trigger: 'change',
          },
        ],
        noticeWayList: [
          {
            required: true,
            message: '通知方式不能为空',
            trigger: 'change',
          },
        ],
        factoryName: [
          {
            required: true,
            message: '对应厂区不能为空',
            trigger: 'blur',
          },
        ],
        noticeUserName: [
          {
            required: true,
            message: '通知人员不能为空',
            trigger: 'change',
          },
        ],
        templateContent: [
          {
            required: true,
            message: '模板内容不能为空',
            trigger: 'blur',
          },
        ],
        oaPath: [
          {
            required: true,
            message: 'OA回调地址不能为空',
            trigger: 'blur',
          },
        ],
      },
    }
  },

  mounted() {
    this.getList()

  },
  activated() {
    this.getList()
  },
  computed: {
    ...mapGetters(['userId', 'name', 'deptName']),
  },

  methods: {
    handleRespName(e) {
      let userNames = e.map((item) => item.userId)
      this.$set(this.editItem, 'noticeUserList', userNames)
    },
    sava() {
      this.$refs['editItemForm'].validate((valid) => {
        if (valid) {
          if (!this.isView) {
            noticeAdd(this.editItem).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess('新增成功')
                this.getList()
              } else {
                this.$modal.msgError(res.msg)
              }
            })
          } else {
            noticeUpdate(this.editItem).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess('修改成功')
                this.getList()
              } else {
                this.$modal.msgError(res.msg)
              }
            })
          }
          this.editItemDialogVisible = false
        }
      })
    },
    handleEdit(row) {
      //获取当前行显示的中文名称
      let noticeUserName = row.row.noticeUserName;
      this.loading = true;
      getNoticeById(row.row.id).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.isView = true
          this.editItemDialogVisible = true
          this.editItem = res.data
          this.editItem.noticeUserName = noticeUserName
        } else {
          this.$modal.msgError(res.msg)
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("注意！此操作将删除通知，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delNoticeById(row.row.id).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(this.$t('deptManage.delSuc'))
            this.getList();
          } else {
            this.$modal.msgError(res.msg)
          }
        })
      })

    },

    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    handleAdd() {
      this.isView = false
      this.editItemDialogVisible = true
      this.editItem = {
        noticeWayList:[]
      }
    },
    /**  类型列表 */
    getList() {
      this.loading = true
      getList().then((res) => {
        if (res.code == 200) {
          this.incomingList = res.rows
          this.total = res.total
          this.loading = false
        } else {
          this.$modal.msgError(res.msg)
        }
      })
    },
    // 取消按钮
    resetQuery() {

      this.queryParams = {
        pageNum: 1,
        pageSize: 20
      }
      this.getList()
    },

    /** 关闭操作 */
    handleClose(row) {
      this.$router.go(-1)
    },

  },
}
</script>
<style lang="scss" scoped></style>
